<template>
  <page-header-wrapper :title="false">
    <a-spin :spinning="loading">
      <a-row :gutter="20">
        <a-col :span="12">
          <a-row :gutter="[0, 20]">
            <a-col :span="24">
              <a-card title="业务基本信息">
                <a-descriptions
                  :column="{ md: 2 }"
                >
                  <a-descriptions-item label="价格">
                    <a-statistic :precision="2" :value="businessDetail['price']" />
                  </a-descriptions-item>
                  <a-descriptions-item label="官费">
                    <a-statistic :precision="2" :value="businessDetail['official_fee']" />
                  </a-descriptions-item>
                  <a-descriptions-item label="业务编号">
                    <b>{{ businessDetail['business_no'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="合同编号">
                    <b>{{ businessDetail['contract_no'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="客户姓名">
                    <b>{{ businessDetail['customer_name'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="联系电话">
                    <b>{{ businessDetail['phone'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="业务开启时间">
                    <b>{{ businessDetail['open_time'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="业务类别">
                    <b>{{ businessDetail['category_format'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="申请主体">
                    <b>{{ businessDetail['subject'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="业务名称">
                    <b>{{ businessDetail['business_name'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="所属顾问">
                    <b>{{ businessDetail['username'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="定稿文件">
                    <a-button v-if="businessDetail['sj_file']" type="link" size="small" icon="download" @click="downFile(businessDetail['sj_file'], businessDetail['sj_filename'])">{{ businessDetail['sj_filename'] }}</a-button>
                    <div v-else>暂无</div>
                  </a-descriptions-item>
                </a-descriptions>
              </a-card>
            </a-col>
            <a-col :span="24">
              <a-card title="业务材料">
                <a-descriptions :column="{ md: 1 }">
                  <a-descriptions-item :label="item.mat_name" v-for="(item,index) in mats" :key="index" :value="index">
                    <div v-if="item.mat_name === '上传设计单'">
                      <a-button v-if="item.filename" size="small" type="link" icon="download" @click="downFile(item.value, item.filename)"><ellipsis :length="30">{{item.filename}}</ellipsis></a-button>
                    </div>
                    <div v-else>
                      {{item.value}}
                    </div>
                  </a-descriptions-item>
                </a-descriptions>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row :gutter="[0, 20]">
            <a-col :span="24">
              <a-card title="业务流转记录">
                <a-timeline>
                  <a-timeline-item v-for="(item,index) in businessHistories" :key="index">
                    <p>{{ item.created_at }} {{ item.step }}，{{ item.username }}，{{ item.notes }}，<a :href="item.file">{{item.filename}}</a></p>
                  </a-timeline-item>
                </a-timeline>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import { getDesignDetail } from '@/api/design.process'
  import apis from '@/api'
  export default {
    components: {
      STable
    },
    name: 'DesignDetail',
    data () {
      return {
        loading: true,
        businessDetail: {},
        businessHistories: [],
        mats: []
      }
    },
    activated () {
      this.getBusinessDetail(this.$route.params.id)
      this.businessDetail['cb_id'] = this.$route.params.id
    },
    methods: {
      getBusinessDetail (id) {
        const app = this
        getDesignDetail(id).then(res => {
          if (res.status === 0) {
            app.businessDetail = res.result['contract_business']
            app.businessHistories = res.result['histories']
            app.mats = res.result['mats']
            app.loading = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      downFile (value, filename) {
        window.open(apis.Download + '?value=' + value + '&filename=' + filename)
      }
    }
  }
</script>

<style scoped>

</style>
